<template>
	<view class="back-con">
		<view class="outermaster">
			<view class="top-menu">
				<view class="left-top-item" @click="toHealthFiles">
					<image src="/static/icons/u2558.png" mode=""></image>
					<text>健康档案</text>
				</view>
				<view class="mid-top-item">
					<image src="/static/icons/u2561.png" mode=""></image>
					<text>健康监测</text>
				</view>
				<view class="right-top-item" @click="toOrganization()">
					<image src="/static/icons/u2564.png" mode=""></image>
					<text>在线签约</text>
				</view>
			</view>
			<view class="buttom-menu">
				<view class="buttom-head">
					<image src="/static/icons/u2567.png" mode=""></image>
					<text @click="toDetails">健康头条</text>
				</view>
				<view class="buttom-sill">
					<image src="/static/icons/u2570.png" mode=""></image>
					<text>慢病护理</text>
				</view>
				<view class="buttom-medicine" @click="toMedication">
					<image src="/static/icons/u2573.png" mode=""></image>
					<text>用药查询</text>
				</view>
				<view class="buttom-tips">
					<image src="/static/icons/u2576.png" mode=""></image>
					<text>用药提醒</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 未实名等级 -->
	<uni-popup ref="checkRef" :animation="false" type="center" border-radius="100px 100px 0 0"
		style="text-align: center;">
		<view class="pop-center">
			<view class="pop-tip">
				尚未登记实名信息，是否前往完善？
			</view>
			<view class="pop-done">
				<view style="color: #999;" @click="closeCheck">取消</view>
				<view style="color: #2984f8;" @click="chooCheck">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getSignApi
	} from '../../api/sign';
	const userStore = useUserStore()

	// 跳转健康头条
	const toDetails = () => {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/headlines/headlines'
		})
	}

	const checkRef = ref(null)
	// 打开确认
	function openCheck() {
		checkRef.value.open()
	}

	// 点击确认
	function chooCheck() {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/newHealthRecord/newHealthRecord'
		})
	}



	// 取消
	function closeCheck() {
		checkRef.value.close()
	}

	const toOrganization = () => {
		uni.navigateTo({
			url: '/SignPackage/pages/organization/organization'

		})
		checkRef.value.close()
	}
	// 前往健康档案
	function toHealthFiles() {
		if (userStore.userInfo.IDnumber) {
			uni.navigateTo({
				url: '/HealthHeadlinesPackage/pages/HealthRecord/HealthRecord'

			})

		} else {
			openCheck()
			checkRef.value.close()
		}

	}

	function toMedication() {
		uni.navigateTo({
			url: '/SignPackage/pages/medication-Inquiry/medication-Inquiry'
		})
	}
</script>

<style lang="scss" scoped>
	.back-con {
		width: 750rpx;
		height: 430rpx;
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.outermaster {
		padding: 0 32rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		overflow: hidden;
	}

	.top-menu {
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

	}

	.left-top-item {
		width: 200rpx;
		height: 176rpx;
		border-radius: 20rpx;
		background-color: #FA746B;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #ffffff;
		}
	}

	.mid-top-item {
		width: 200rpx;
		height: 176rpx;
		border-radius: 20rpx;
		background-color: #FDDB78;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #ffffff;
		}
	}

	.right-top-item {
		width: 200rpx;
		height: 176rpx;
		border-radius: 20rpx;
		background-color: #28D094;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #ffffff;
		}
	}

	.buttom-menu {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		padding-bottom: 30rpx;
	}

	.buttom-head {
		width: 150rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.buttom-sill {
		width: 150rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #333333;
		}


	}

	.buttom-medicine {
		width: 150rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.buttom-tips {
		width: 150rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #333333;
		}
	}

	// 中间弹出层
	.pop-center {
		width: 520rpx;
		height: 352rpx;
		background-color: #fff;
	}

	.pop-tip {
		height: 264rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		line-height: 56rpx;
		color: #333;
	}

	.pop-done {
		height: 88rpx;
		border-top: 1px solid #e6e6e6;
		display: flex;
	}

	.pop-done view {
		height: 88rpx;
		width: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
</style>